<template>
  <div class="userAvatar-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>更换头像</span>
      </div>
      <div>
        <img :src="avatar" alt="" v-if="avatar" class="img" />
        <img src="@/assets/images/avatar.jpg" alt="" class="img" v-else />
        <div class="btn">
          <input ref="filePic" type="file" style="display: none" @change="onFileChange" />
          <el-button type="primary" @click="choosePic">
            <i class="el-icon-plus"></i> 选择图片
          </el-button>
          <el-button type="success" @click="upPic">
            <i class="el-icon-upload"></i> 上传头像
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { updateUserAvatarAPI } from '@/api'
export default {
  data() {
    return {
      // 图片64位地址
      avatar: '',
      // 节流变量
      valid: true
    }
  },
  methods: {
    // input[type=file]触发的change事件函数
    onFileChange(e) {
      // 拿到用户选择的文件数组
      const files = e.target.files
      if (files.length === 0) {
        // 证明刚刚文件选择窗口打开了，但是用户一个文件都没有选择然后点击了确定关闭选择弹窗
      } else {
        // 证明用户选择了文件（默认只能选择一个，如果要选择多个需要给input标签加额外的原生属性）
        const fr = new FileReader()
        // 传入文件对象开始读取
        fr.readAsDataURL(files[0])
        // onload把文件读取成base64字符串后会触发onload事件函数
        fr.onload = (e) => {
          //  e.target.result就是读完的结果
          this.avatar = e.target.result
        }
      }
    },
    // 选择图片按钮
    choosePic() {
      this.$refs.filePic.click()
    },
    // 上传图片按钮
    upPic() {
      if (!this.valid) {
        // 首次点击不会return,
        return
      }
      // 首次点击之后全局变量置为false,同时向下执行，setTimeout推入待执行队列
      this.valid = false
      // eslint-disable-next-line
      this.timer = setTimeout(async () => {
        if (!this.avatar) {
          this.$message({
            message: '请选择头像',
            type: 'warning'
          })
        } else {
          const { data } = await updateUserAvatarAPI({ avatar: this.avatar })
          console.log(data)
          if (data.code === 0) {
            this.$message({
              message: '上传头像成功!',
              type: 'success'
            })
            // 实时更新vuex里面用户对象信息
            this.$store.dispatch('getUserInfo')
            // 清空头像
            this.avatar = ''
          } else {
            this.$message.error('上传头像失败!')
          }
        }
        this.valid = true // 在定时器未执行前，valid为false,所以点击方法会直接return
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 10px;
}
.img {
  width: 350px;
  height: 350px;
}
</style>
